<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Xenon Boostrap Admin Panel" />
	<meta name="author" content="" />
	
	<title>Xenon - Dashboard</title>
	
	
	<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
	<link rel="stylesheet" href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/xenon-core.css">
	<link rel="stylesheet" href="assets/css/xenon-forms.css">
	<link rel="stylesheet" href="assets/css/xenon-components.css">
	<link rel="stylesheet" href="assets/css/xenon-skins.css">
	<link rel="stylesheet" href="assets/css/custom.css">

	<script src="assets/js/jquery-1.11.1.min.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	
</head>
<body class="page-body">

	<div class="settings-pane">
			
		<a href="#" data-toggle="settings-pane" data-animate="true">
			&times;
		</a>
		
		<div class="settings-pane-inner">
			
			<div class="row">
				
				<div class="col-md-4">
					
					<div class="user-info">
						
						<div class="user-image">
							<a href="extra-profile.html">
								<img src="assets/images/user-2.png" class="img-responsive img-circle" />
							</a>
						</div>
						
						<div class="user-details">
							
							<h3>
								<a href="extra-profile.html">John Smith</a>
								
								<!-- Available statuses: is-online, is-idle, is-busy and is-offline -->
								<span class="user-status is-online"></span>
							</h3>
							
							<p class="user-title">Web Developer</p>
							
							<div class="user-links">
								<a href="extra-profile.html" class="btn btn-primary">Edit Profile</a>
								<a href="extra-profile.html" class="btn btn-success">Upgrade</a>
							</div>
							
						</div>
						
					</div>
					
				</div>
				
				<div class="col-md-8 link-blocks-env">
					
					<div class="links-block left-sep">
						<h4>
							<span>Notifications</span>
						</h4>
						
						<ul class="list-unstyled">
							<li>
								<input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk1" />
								<label for="sp-chk1">Messages</label>
							</li>
							<li>
								<input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk2" />
								<label for="sp-chk2">Events</label>
							</li>
							<li>
								<input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk3" />
								<label for="sp-chk3">Updates</label>
							</li>
							<li>
								<input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk4" />
								<label for="sp-chk4">Server Uptime</label>
							</li>
						</ul>
					</div>
					
					<div class="links-block left-sep">
						<h4>
							<a href="#">
								<span>Help Desk</span>
							</a>
						</h4>
						
						<ul class="list-unstyled">
							<li>
								<a href="#">
									<i class="fa-angle-right"></i>
									Support Center
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa-angle-right"></i>
									Submit a Ticket
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa-angle-right"></i>
									Domains Protocol
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa-angle-right"></i>
									Terms of Service
								</a>
							</li>
						</ul>
					</div>
					
				</div>
				
			</div>
		
		</div>
		
	</div>
	<div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
	<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
			
		<jsp:include page="menu.jsp" flush="true">
			<jsp:param name="selectSuper" value="1"/> 
     		<jsp:param name="selectIndex" value="1"/> 
		</jsp:include>
		<div class="main-content">
					
		<jsp:include page="title.jsp" flush="true"/>	
			
			<div class="row">
				<div class="col-sm-3" id="diskList">
					
					<div  class="xe-widget xe-counter">
						<div class="xe-icon">
							<i class="linecons-cloud"></i>
						</div>
						<div class="xe-label">
							<strong id="baifenbi" class="num">0%</strong>
							<span>空间使用率</span>
						</div>
					</div>
					
					<div  class="xe-widget xe-counter xe-counter-purple">
						<div class="xe-icon">
							<i class="linecons-user"></i>
						</div>
						<div class="xe-label">
							<strong id="size" class="num">0GB</strong>
							<span>总空间</span>
						</div>
					</div>
					
					<div  class="xe-widget xe-counter xe-counter-info">
						<div class="xe-icon">
							<i class="linecons-camera"></i>
						</div>
						<div class="xe-label">
							<strong id="freeSize" class="num">0GB</strong>
							<span>以使用空间</span>
						</div>
					</div>
					
					
					
					<!-- <div class="xe-widget xe-counter">
						<div class="xe-icon">
							<i class="linecons-cloud"></i>
						</div>
						<div class="xe-label">
							<span class="num" id="baifenbi">0.00%</span>
							<span>空间使用率</span>
						</div>
					</div>
					
					<div class="xe-widget xe-counter xe-counter-purple">
						<div class="xe-icon">
							<i class="linecons-user"></i>
						</div>
						<div class="xe-label">
							<span id="size" class="num">0</span>
							<span>总空间</span>
						</div>
					</div>
					
					<div class="xe-widget xe-counter xe-counter-info">
						<div class="xe-icon">
							<i class="linecons-camera"></i>
						</div>
						<div class="xe-label">
							<span id="freeSize" class="num">0</span>
							<span>以使用空间</span>
						</div>
					</div> -->
				</div>	
					
					<script type="text/javascript">
						$.ajax({
  								type: 'GET',
  								url: 'common/disks',
  								data: '',
  								dataType: 'json',
  								anys:false,
 			 					success: function(data){
 			 						var size = 0;
 			 						var freeSize = 0;
 			 						for(var i = 0 ;i<data.length;i++){
 			 							size += data[i].size;
 			 							freeSize += data[i].freeSize;
 			 						}
 			 						var size = size/1024/1024/1024;
 			 						var freeSize = freeSize/1024/1024/1024;
 			 						var baifenbi = returnFloat(freeSize/size*100);
 			 						size = returnFloat(size);
 			 						freeSize = returnFloat(freeSize);
 			 						/* $("#baifenbi").text(baifenbi+"%");
 			 						$("#size").text(size+"GB");
 			 						$("#freeSize").text(freeSize+"GB"); */
 			 						/* $("#baifenbi").attr("data-to",baifenbi);
 			 						$("#size").attr("data-to",size);
 			 						$("#freeSize").attr("data-to",freeSize); */
 			 						
 			 						
 			 						var $el = jQuery("#baifenbi"),
 									options = {
 			 							useEasing : true, 
 										useGrouping : true, 
 										separator : ',', 
 										decimal : '.', 
 										prefix : '',
 										suffix : '%'
 									},
 									cntr = new countUp($el[0], 0, baifenbi, 2, 1.5, options);
 									cntr.start();
 									
 									$el = jQuery("#size"),
 									cntr = new countUp($el[0], 0, size, 2, 1.5, options);
 									cntr.start();
 									
 									$el = jQuery("#freeSize"),
 									cntr = new countUp($el[0], 0, freeSize, 2, 1.5, options);
 									cntr.start();
 									
 			 					}
						});
					
					function nameChar(name){
						if(name==""||name==null){
							return "未命名";
						}else{
							return name;
						}
					}
					
					function returnFloat(value){
 							var value=Math.round(parseFloat(value)*100)/100;
 							var xsd=value.toString().split(".");
 							if(xsd.length==1){
 								value=value.toString()+".00";
 								return value;
 							}
 							if(xsd.length>1){
 								if(xsd[1].length<2){
 									value=value.toString()+"0";
 								}
 								return value;
 							}
					}
					</script>
    				
				<div class="col-sm-6">
					
					<div class="chart-item-bg">
						<div id="pageviews-visitors-chart" style="height: 298px;"></div>
					</div>
					
				</div>
					
        
        
    

					
					
					
					
			
				<div class="col-sm-3">
					
					<div class="chart-item-bg">
						<div class="chart-label chart-label-small">
							<div class="h4 text-purple text-bold" data-count="this" data-from="0.00" data-to="95.8" data-suffix="%" data-duration="1.5">0.00%</div>
							<span class="text-small text-upper text-muted">Current Server Uptime</span>
						</div>
						<div id="server-uptime-chart" style="height: 134px;"></div>
					</div>
					
					<div class="chart-item-bg">
						<div class="chart-label chart-label-small">
							<div class="h4 text-secondary text-bold" data-count="this" data-from="0.00" data-to="320.45" data-decimal="," data-duration="2">0</div>
							<span class="text-small text-upper text-muted">Avg. of Sales</span>
						</div>
						<div id="sales-avg-chart" style="height: 134px; position: relative;">
							<div style="position: absolute; top: 25px; right: 0; left: 40%; bottom: 0"></div>
						</div>
					</div>
					
				</div>
			
			
			
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					
					<div class="chart-item-bg">
						<div id="pageviews-stats" style="height: 533px; padding: 20px 0;"></div>
						
						
					</div>
					
				</div>
				<div class="col-sm-6">
					
					<div class="chart-item-bg">
						<div class="chart-label">
							<div id="network-mbs-packets" class="h1 text-purple text-bold" data-count="this" data-from="0.00" data-to="0" data-suffix="B/s" data-duration="1">
								0.00mb/s
							</div>
							<span class="text-small text-muted text-upper">下载速度</span>
						</div>
						<div class="chart-right-legend">
							<div id="network-realtime-gauge" style="width: 170px; height: 140px"></div>
						</div>
						<div id="realtime-network-stats" style="height: 320px"></div>
					</div>
					
					<div class="chart-item-bg">
						<div class="chart-label">
							<div id="cpuRatio" class="h1 text-secondary text-bold">0.00%</div>
							<span class="text-small text-muted text-upper">CPU 使用率</span>
							
							<p class="text-medium" style="width: 50%; margin-top: 10px">可以查看当前服务器CPU的使用率</p>
						</div>
						<div id="other-stats" style="min-height: 183px">
							<div id="cpu-usage-gauge" style="width: 170px; height: 140px; position: absolute; right: 20px; top: 20px"></div>
						</div>
					</div>
					
				</div>
			</div>
			
			
			
			<!-- Main Footer -->
			<!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
			<!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
			<!-- Or class "fixed" to  always fix the footer to the end of page -->
			<footer class="main-footer sticky footer-type-1">
				
				<div class="footer-inner">
				
					<!-- Add your copyright text here -->
					<div class="footer-text">
						&copy; 2014 
						<strong>Xenon</strong> 
						More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
					</div>
					
					
					<!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
					<div class="go-up">
					
						<a href="#" rel="go-top">
							<i class="fa-angle-up"></i>
						</a>
						
					</div>
					
				</div>
				
			</footer>
		</div>
		
			
		<!-- start: Chat Section -->
		<div id="chat" class="fixed">
			
			<div class="chat-inner">
			
				
				<h2 class="chat-header">
					<a href="#" class="chat-close" data-toggle="chat">
						<i class="fa-plus-circle rotate-45deg"></i>
					</a>
					
					Chat
					<span class="badge badge-success is-hidden">0</span>
				</h2>
				
				<script type="text/javascript">
				// Here is just a sample how to open chat conversation box
				jQuery(document).ready(function($)
				{
					
					
					
					var $chat_conversation = $(".chat-conversation");
					
					$(".chat-group a").on('click', function(ev)
					{
						ev.preventDefault();
						
						$chat_conversation.toggleClass('is-open');
						
						$(".chat-conversation textarea").trigger('autosize.resize').focus();
					});
					
					$(".conversation-close").on('click', function(ev)
					{
						ev.preventDefault();
						$chat_conversation.removeClass('is-open');
					});
				});
				</script>
				
				
				<div class="chat-group">
					<strong>Favorites</strong>
					
					<a href="#"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
					<a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
				</div>
				
				
				<div class="chat-group">
					<strong>Work</strong>
					
					<a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
				</div>
				
				
				<div class="chat-group">
					<strong>Other</strong>
					
					<a href="#"><span class="user-status is-online"></span> <em>Dennis E. Johnson</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Stuart A. Shire</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Janet I. Matas</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Mindy A. Smith</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Gregory E. Robie</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Nellie T. Foreman</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>William R. Miller</em></a>
					<a href="#"><span class="user-status is-idle"></span> <em>Vivian J. Hall</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Melinda A. Anderson</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Gary M. Mooneyham</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Robert C. Medina</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Dylan C. Bernal</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Marc P. Sanborn</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Kenneth M. Rochester</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Rachael D. Carpenter</em></a>
				</div>
			
			</div>
			
			<!-- conversation template -->
			<div class="chat-conversation">
				
				<div class="conversation-header">
					<a href="#" class="conversation-close">
						&times;
					</a>
					
					<span class="user-status is-online"></span>
					<span class="display-name">Arlind Nushi</span> 
					<small>Online</small>
				</div>
				
				<ul class="conversation-body">	
					<li>
						<span class="user">Arlind Nushi</span>
						<span class="time">09:00</span>
						<p>Are you here?</p>
					</li>
					<li class="odd">
						<span class="user">Brandon S. Young</span>
						<span class="time">09:25</span>
						<p>This message is pre-queued.</p>
					</li>
					<li>
						<span class="user">Brandon S. Young</span>
						<span class="time">09:26</span>
						<p>Whohoo!</p>
					</li>
					<li class="odd" id="str">
						<span class="user">Arlind Nushi</span>
						<span class="time">09:27</span>
						<p>Do you like it?</p>
					</li>
				</ul>
				
				<div class="chat-textarea">
					<textarea class="form-control autogrow" placeholder="Type your message"></textarea>
				</div>
				
			</div>
			
		</div>
		<!-- end: Chat Section -->
		
		
	</div>
	
	
	<div class="page-loading-overlay">
		<div class="loader-2"></div>
	</div>
	



	<!-- Bottom Scripts -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/TweenMax.min.js"></script>
	<script src="assets/js/resizeable.js"></script>
	<script src="assets/js/joinable.js"></script>
	<script src="assets/js/xenon-api.js"></script>
	<script src="assets/js/xenon-toggles.js"></script>


	<!-- Imported scripts on this page -->
	<script src="assets/js/xenon-widgets.js"></script>
	<script src="assets/js/devexpress-web-14.1/js/globalize.min.js"></script>
	<script src="assets/js/devexpress-web-14.1/js/dx.chartjs.js"></script>
	<script src="assets/js/toastr/toastr.min.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="assets/js/xenon-custom.js"></script>
	<script type="text/javascript" src="echarts/echarts.min.js"></script>
	<script type="text/javascript">
				jQuery(document).ready(function($)
				{	
				
					
					// Notifications
					setTimeout(function()
					{			
						var opts = {
							"closeButton": true,
							"debug": false,
							"positionClass": "toast-top-right toast-default",
							"toastClass": "black",
							"onclick": null,
							"showDuration": "100",
							"hideDuration": "1000",
							"timeOut": "5000",
							"extendedTimeOut": "1000",
							"showEasing": "swing",
							"hideEasing": "linear",
							"showMethod": "fadeIn",
							"hideMethod": "fadeOut"
						};
				
						 toastr.info("You have been awarded with 1 year free subscription. Enjoy it!", "Account Subcription Updated", opts); 
					}, 3000);
					
					
					
					
					
					// Charts
					var xenonPalette = ['#68b828','#7c38bc','#0e62c7','#fcd036','#4fcdfc','#00b19d','#ff6264','#f7aa47'];
					
					// Pageviews Visitors Chart
					var i = 0,
						line_chart_data_source = [
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0},
						{ id: ++i, part1: 0}
					];
					
					function curtail(arr) {
						var m = arr.slice(0);
			    		m.splice(0,1);
			    		return m;
					}
					
					
					
					var option = {
								title: {
									left: 'center',
						        	text: '内存情况(总内存:)'
						    	},
						    	legend: {
						            data:['已使用内存','空闲内存'],
						            left:"right",
						            selectedMode:false
						        },
								xAxis: {
									show:false, 
									type: 'category',
									data: [1,2,3,4,5,6,7,8,9,10]
								},
								yAxis: {
									axisLabel: {
						                formatter: function (val) {
						                    return val + 'MB';
						                }
						            },
									type: 'value'
								},
								series: [{
									name: "已使用内存",
									data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
									type: 'line',
							        areaStyle: {}
								},
								{
						            name:'空闲内存',
						            type:'line',
						            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
							        areaStyle: {}
						        }]
							};
					var DashboardChart = echarts.init(document.getElementById('pageviews-visitors-chart'));
					//DashboardChart.setOption(option);
					DashboardChart.showLoading();
					
					function loadDashboardInfo(){
						$.ajax({
							type: 'GET',
							url: 'common/moninfo',
							data: '',
							dataType: 'json',
							anys:false,
		 					success: function(data){
		 						option.series[0].data = curtail(option.series[0].data);
		 						option.series[0].data.push(Number(data.usedMemory)/1024);
		 						
		 						option.series[1].data = curtail(option.series[1].data);
		 						option.series[1].data.push(Number(data.freePhysicalMemorySize)/1024);
		 						
		 						option.xAxis.data = curtail(option.xAxis.data);
		 						var num = option.xAxis.data[option.xAxis.data.length - 1];
		 						num++;
		 						option.xAxis.data.push(num);
		 						
		 						option.title.text="内存情况(总内存:"+Number(data.totalMemorySize/1024/1024).toFixed(2)+"GB)";
		 						
		 						DashboardChart.setOption(option,true);
		 						DashboardChart.hideLoading();
		 					}
					});
					}
					
					
					setInterval(function(){ loadDashboardInfo(); }, 2000);
						
					
					
					
					
					
					// Server Uptime Chart
					var bar1_data_source = [
						{ year: 1, 	europe: 10, americas: 0, africa: 5 },
						{ year: 2, 	europe: 20, americas: 5, africa: 15 },
						{ year: 3, 	europe: 30, americas: 10, africa: 15 },
						{ year: 4, 	europe: 40, americas: 15, africa: 30 },
						{ year: 5, 	europe: 30, americas: 10, africa: 20 },
						{ year: 6, 	europe: 20, americas: 5,  africa: 10 },
						{ year: 7, 	europe: 10, americas: 15, africa: 0 },
						{ year: 8, 	europe: 20, americas: 25, africa: 8 },
						{ year: 9, 	europe: 30, americas: 35, africa: 16 },
						{ year: 10,	europe: 40, americas: 45, africa: 24 },
						{ year: 11,	europe: 50, americas: 40, africa: 32 },
					];
					
					$("#server-uptime-chart").dxChart({
						dataSource: [
							{id: ++i, 	sales: 1},
							{id: ++i, 	sales: 2},
							{id: ++i, 	sales: 3},
							{id: ++i, 	sales: 4},
							{id: ++i, 	sales: 5},
							{id: ++i, 	sales: 4},
							{id: ++i, 	sales: 5},
							{id: ++i, 	sales: 6},
							{id: ++i, 	sales: 7},
							{id: ++i, 	sales: 6},
							{id: ++i, 	sales: 5},
							{id: ++i, 	sales: 4},
							{id: ++i, 	sales: 5},
							{id: ++i, 	sales: 4},
							{id: ++i, 	sales: 4},
							{id: ++i, 	sales: 3},
							{id: ++i, 	sales: 4},
						],
					 
						series: {
							argumentField: "id",
							valueField: "sales",
							name: "Sales",
							type: "bar",
							color: '#7c38bc'
						},
						commonAxisSettings: {
							label: {
								visible: false
							},
							grid: {
								visible: false
							}
						},
						legend: {
							visible: false
						},
						argumentAxis: {
					        valueMarginsEnabled: true
					    },
						valueAxis: {
							max: 12
						},
						equalBarWidth: {
							width: 11
						}
					}); 
					
					
					
					// Average Sales Chart
					var doughnut1_data_source = [
						{region: "Asia", val: 4119626293},
						{region: "Africa", val: 1012956064},
						{region: "Northern America", val: 344124520},
						{region: "Latin America and the Caribbean", val: 590946440},
						{region: "Europe", val: 727082222},
						{region: "Oceania", val: 35104756},
						{region: "Oceania 1", val: 727082222},
						{region: "Oceania 3", val: 727082222},
						{region: "Oceania 4", val: 727082222},
						{region: "Oceania 5", val: 727082222},
					], timer;
					
					 $("#sales-avg-chart div").dxPieChart({
						dataSource: doughnut1_data_source,
						tooltip: {
							enabled: false,
						  	format:"millions",
							customizeText: function() { 
								return this.argumentText + "<br/>" + this.valueText;
							}
						},
						size: {
							height: 90
						},
						legend: {
							visible: false
						},  
						series: [{
							type: "doughnut",
							argumentField: "region"
						}],
						palette: ['#5e9b4c', '#6ca959', '#b9f5a6'],
					}); 
					
					 
					 var myChart;
					 
					 $.ajax({
							type: 'GET',
							url: 'common/selectType',
							data: '',
							dataType: 'json',
							anys:false,
		 					success: function(data){
		 						var numberList = [];
		 						var lableList = [];
		 						var echrData = [];
		 						var max = 0;
		 						for(var i in data){
			 						numberList.push(data[i].number);
			 						lableList.push(data[i].type);
			 						echrData.push({value:data[i].number,name:data[i].type});
			 						if(max<Number(data[i].number)){
			 							max = Number(data[i].number);
			 						}
		 						} 
		 						
		 						var option = {
		 							    title : {
		 							        text: '服务器文件占比',
		 							        x:'center'
		 							    },
		 							    tooltip : {
		 							        trigger: 'item',
		 							        formatter: "{a}  {b} : {c} ({d}%)"
		 							    },
		 							    legend: {
		 							        orient: 'vertical',
		 							        left: 'left',
		 							        data: lableList
		 							    },
		 							    series : [
		 							        {
		 							            name: '文件数量',
		 							            type: 'pie',
		 							            radius : '55%',
		 							            center: ['50%', '60%'],
		 							            data:echrData,
		 							            itemStyle: {
		 							                emphasis: {
		 							                    shadowBlur: 10,
		 							                    shadowOffsetX: 0,
		 							                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		 							                }
		 							            }
		 							        }
		 							    ]
		 							};
		 						myChart = echarts.init(document.getElementById('pageviews-stats'));
		 						myChart.setOption(option);
		 						/* $('#pageviews-stats').append(
										'<div id="pageviewsgauge" style="width: 80%; height: 100%; margin-top: 20px; float: left;"></div>',
										'<div id="pageviewspanel" style="width: 20%; text-align: left; margin-top: 20px; float: left;"></div>'
								);
		 						
		 						var pageview = $('#pageviewsgauge').dxBarGauge({
									startValue: 0,
									endValue: max,
									label: {
										format: 'fixedPoint',
										precision: 0,
										customizeText:function(arg){
											return $("#pageviewspanel input[value='"+arg.value+"']").attr("lable");
										}
									},
									palette: xenonPalette
								}).dxBarGauge('instance');
		 						
		 						
		 						$('#pageviewspanel').append($.map(data, function (product) {
									return $('<div></div>').append(
										'<input type="checkbox" class="cbr" lable="'+product.type+'" value="' + product.number + '" checked></input>',
										'<span style="margin-left: 10px;">' + product.type+"--"+product.number + '</span>'
									);
								}));
		 						
		 						var $inputs = $('#pageviewspanel input').change(handleChange);
		 						
		 						function handleChange () {
									var values = $.map($inputs, function (input) {
										return $(input).prop('checked') ? $(input).val() : null;
									});
									pageview.values(values);
								}
		 						
		 						handleChange();
		 						cbr_replace(); */
		 					}
					});
					
					
					
					// Realtime Network Stats
					var i = 0,
						rns_values = [130,150],
						rns2_values = [39,50],
						realtime_network_stats = [];
					
					for(i=0; i<=10; i++)
					{
						realtime_network_stats.push({ id: i, x1:0, x2: 0});
					}
					
					 $("#realtime-network-stats").dxChart({
						dataSource: realtime_network_stats,
						commonSeriesSettings: {
							type: "area",
							argumentField: "id"
						},
						series: [
							{ valueField: "x1", name: "Packets Sent", color: '#7c38bc', opacity: .4 },
							{ valueField: "x2", name: "Packets Received", color: '#000', opacity: .5},
						],
						legend: {
							verticalAlignment: "bottom",
							horizontalAlignment: "center"
						},
						commonAxisSettings: {
							label: {
								visible: false
							},
							grid: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						legend: {
							visible: false
						},
						argumentAxis: {
					        valueMarginsEnabled: false
					    },
						animation: {
							enabled: false
						}
					}).data('iCount', i); 
					
					 $('#network-realtime-gauge').dxCircularGauge({
						scale: {
							startValue: 0,
							endValue: 200,
							majorTick: {
								tickInterval: 50
							}
						},
						rangeContainer: {
							palette: 'pastel',
							width: 3,
							ranges: [
								{ startValue: 0, endValue: 50, color: "#7c38bc" },
								{ startValue: 50, endValue: 100, color: "#7c38bc" },
								{ startValue: 100, endValue: 150, color: "#7c38bc" },
								{ startValue: 150, endValue: 200, color: "#7c38bc" },
							],
						},
						value: 0,
						valueIndicator: {
							offset: 10,
							color: '#7c38bc',
							type: 'triangleNeedle',
							spindleSize: 12
						}
					}); 
					
					//setInterval(function(){  networkRealtimeChartTick(rns_values, rns2_values); }, 1000);
					setInterval(function(){ networkRealtimeGaugeTick(); }, 2000);
					//setInterval(function(){ networkRealtimeMBupdate(); }, 3000); 
					
					
					
					// CPU Usage Gauge
					 $("#cpu-usage-gauge").dxCircularGauge({
						scale: {
							startValue: 0,
							endValue: 100,
							majorTick: {
								tickInterval: 25
							}
						},
						rangeContainer: {
							palette: 'pastel',
							width: 3,
							ranges: [
								{ startValue: 0, endValue: 25, color: "#68b828" },
								{ startValue: 25, endValue: 50, color: "#68b828" },
								{ startValue: 50, endValue: 75, color: "#68b828" },
								{ startValue: 75, endValue: 100, color: "#d5080f" },
							],
						},
						value: 30,
						valueIndicator: {
							offset: 10,
							color: '#68b828',
							type: 'rectangleNeedle',
							spindleSize: 12
						}
					});
					
					
					// Resize charts
					$(window).on('xenon.resize', function()
					{
						
						$("#server-uptime-chart").data("dxChart").render();
						$("#realtime-network-stats").data("dxChart").render();
						myChart.resize();
						DashboardChart.resize();
						
					});
					
				});
				
				function networkRealtimeChartTick(min_max, min_max2)
				{
					
				}
				
				function networkRealtimeGaugeTick()
				{
					$.ajax({
							type: 'POST',
							url: 'http://127.0.0.1:6800/jsonrpc',
							data: JSON.stringify({"jsonrpc":"2.0","method":"aria2.tellActive","id":"QXJpYU5nXzE1MzA2MDk3NzBfMC44NzA0MTY5MDMzMTA0ODMy","params":[["gid","totalLength","completedLength","uploadSpeed","downloadSpeed","connections","numSeeders","seeder","status","errorCode"]]}),
							dataType: 'json',
							contentType: 'application/json; charset=utf-8',
							traditional: true,
							anys:false,
		 					success: function(data){
		 						var spped = 0;
		 						var uploadSpeed = 0;
		 						for(var i in data.result){
		 							spped += Number(data.result[i].downloadSpeed);
		 							uploadSpeed += Number(data.result[i].uploadSpeed);
		 						}
		 						
		 						
		 						//仪表刷新
		 						var nr_gauge = jQuery('#network-realtime-gauge').dxCircularGauge('instance');
		 						nr_gauge.value((spped/1024/1024) * 8);
		 						
		 						//下载量实时显示
		 						var sppedText = "B/s";
		 						if(spped != null && spped != ""){
		 							var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
		 							var srcsize = parseFloat(spped);
				    				index=Math.floor(Math.log(srcsize)/Math.log(1024));
				    				sppedText = unitArr[index]+'/s';
		 						}
		 						
		 						var $el = jQuery("#network-mbs-packets"),
								options = {
									useEasing : true, 
									useGrouping : true, 
									separator : ',', 
									decimal : '.', 
									prefix : '',
									suffix : sppedText
								},
								cntr = new countUp($el[0], parseFloat($el.text().replace(/[^\d|.]/g, '')), parseFloat(renderSize(spped)), 2, 1.5, options);
								
								cntr.start();
								
								
								
								
							//下载曲线图	
							var $ = jQuery,
							i = 0;
							
							var chart_data = $('#realtime-network-stats').dxChart('instance').option('dataSource');
							
							var count = $('#realtime-network-stats').data('iCount');
							
							$('#realtime-network-stats').data('iCount', count + 1);
							
							chart_data.shift();
							chart_data.push({id: count + 1, x1: spped, x2: uploadSpeed});
							
							$('#realtime-network-stats').dxChart('instance').option('dataSource', chart_data);
		 					}
					});
					
				}
				
				function renderSize(value){
				    if(null==value||value==''){
				        return "0 Bytes";
				    }
				    var unitArr = new Array("B","KB","MB","GB","TB","PB","EB","ZB","YB");
				    var index=0;
				    var srcsize = parseFloat(value);
				    index=Math.floor(Math.log(srcsize)/Math.log(1024));
				    var size =srcsize/Math.pow(1024,index);
				    size=size.toFixed(2);//保留的小数位数
				    return size+unitArr[index];
				}
				
				
				function between(randNumMin, randNumMax)
				{
					var randInt = Math.floor((Math.random() * ((randNumMax + 1) - randNumMin)) + randNumMin);
					
					return randInt;
				}
			</script>
			
			<script type="text/javascript">
				//DataCompass();
				function DataCompass(){
					$.ajax({
  								type: 'GET',
  								url: 'common/moninfo',
  								data: '',
  								dataType: 'json',
  								anys:false,
 			 					success: function(data){
 			 						cupinfo(data.cpuRatio);
 			 					}
						});
						setTimeout("DataCompass();",5000)
				}
				
				
				function cupinfo(cpuRatio){
					$("#cpu-usage-gauge").dxCircularGauge({
						value: cpuRatio
					});
					
					$("#cpuRatio").text(cpuRatio+"%");
				}
			
			</script>
<div class="xenon-loading-bar"><span data-pct="0"></span></div>
</body>
</html>